<template>
  <div class="main">
    <div class="header">
      <div class="header-center fl">
        <div class="header-title">星云教育数据中台</div>
        <div class="header-img"></div>
      </div>
    </div>

    <div class="content">
      <div class="content-right">
        <div class="right-infp">
          <div class="right-infp-name">
            <div class="kuai">
              <video ref="videoElement" autoplay></video>
              <span class="o1"></span>
              <span class="o2"></span>
              <span class="o3"></span>
              <span class="o4"></span>
            </div>
          </div>

          <div class="right-infp-btn">
            <a @click="goBack"> 返回账号登录 </a>

            <!-- <a @click="signUp_asd">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              注册
            </a> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
import * as THREE from "three";
import Net from "vanta/src/vanta.net";
export default {
  name: "MyFace",
  data() {
    return {
      username: "",
      password: "",
      msg: "",
    };
  },
  methods: {
    // goNext() {
    //   this.$router.push({ path: "/school" });
    // },
    goBack() {
      this.$router.push({ path: "/login" });
    },
    startCamera() {
      navigator.mediaDevices
        .getUserMedia({ video: true })
        .then((stream) => {
          this.videoElement.srcObject = stream;
        })
        .catch((error) => {
          console.error("Error accessing camera:", error);
        });
    },
    takePhoto() {
      // 获得Canvas对象
      let canvas = document.createElement("canvas");
      let ctx = canvas.getContext("2d");
      canvas.width = this.videoElement.videoWidth;
      canvas.height = this.videoElement.videoHeight;
      ctx.drawImage(this.videoElement, 0, 0, canvas.width, canvas.height);
      // toDataURL --- 可传入'image/png'---默认, 'image/jpeg'
      let img = canvas.toDataURL();
      // console.log("img-----", img);

      this.$http({
        url: this.$http.adornUrl(`/face/face-login`),
        method: "post",
        data: this.$http.adornData(img, false, "json"),
      }).then((response) => {
        if (response.data.code != 0) {
          this.$message.error(response.data.message);
        } else {
          this.$message.success(response.data.message);
          this.$router.push({ path: "/school" });
          // 关闭摄像头
          let stream = this.videoElement.srcObject;
          let tracks = stream.getTracks();
          tracks.forEach((track) => track.stop());
        }
      });
    },
  },
  mounted() {
    this.videoElement = this.$refs.videoElement;
    this.startCamera();
    setTimeout(() => {
      this.takePhoto();
    }, 3000); // 2000毫秒后自动执行takePhoto方法
  },
};
</script>


<style scoped >
.main {
  font-size: 0.16rem;
  color: #ffffff;
  background: url("../assets/dengimages/bj.jpg") no-repeat;
  background-size: cover;

  width: 100%;
  height: 100%;
  position: relative;
}

/*头部*/
.header {
  margin: 0 auto;
  width: 80%;
  height: 4.5rem;
  /*background: red;*/
}

.header .header-center {
  width: 50%;
  height: 3.6rem;
  position: relative;
  margin: 0 auto;
}
.header .header-center .header-title {
  transform: scale(1.5);
  text-align: center;
  color: #ffffff;
  font-size: 0.7rem;
  text-shadow: 0 0 0.5rem #00d8ff;
  line-height: 3rem;
}
.header .header-img {
  transform: scale(1.5);
  background: url("../assets/dengimages/head.gif") no-repeat center center;
  background-size: 100%;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 2rem;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);
  /* display: flex;
  justify-content: space-between; */
  width: 30rem;
  height: 30rem;
  /*background: green;*/
  margin: 0 auto;
  /*border: 1px solid green;*/
}
/* .content-left,
.content-right {
  flex: 1;
} */

.content .content-right {
  width: 100%;
  height: 100%;
  background: url("../assets/dengimages/e.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.right-infp {
  width: 21.5rem;
  height: 18.5rem;
  margin: auto auto;
  /* border: 1px solid red;*/
  vertical-align: center;
  position: absolute;
  top: 7.2rem;
  left: 4rem;
}
.right-infp-name {
  width: 100%;
  height: 13.5rem;
  background-size: 100% 100%;
  line-height: 1.9rem;
  margin-bottom: 1.8rem;
  position: relative;
}

.kuai {
  width: 100%;
  height: 13.5rem;
}

.kuai video {
  width: 100%;
  height: 13.5rem;
}
.kuai span {
  width: 3.5rem;
  height: 2rem;
}
.kuai .o1 {
  position: absolute;
  border-top: 2px solid aqua;
  border-left: 2px solid aqua;
  left: 25px;
  top: -10px;
}
.kuai .o2 {
  position: absolute;
  border-top: 2px solid aqua;
  border-right: 2px solid aqua;
  right: 25px;
  top: -10px;
}
.kuai .o3 {
  position: absolute;
  border-bottom: 2px solid aqua;
  border-left: 2px solid aqua;
  bottom: -10px;
  left: 25px;
}
.kuai .o4 {
  position: absolute;
  border-bottom: 2px solid aqua;
  border-right: 2px solid aqua;
  bottom: -10px;
  right: 25px;
}
.right-infp-btn {
  width: 100%;
  height: 7.5rem;
  position: relative;
}
.right-infp-btn a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #00eaff;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: 0.5s;
  border: 2px solid #00eaff;
  letter-spacing: 4px;
}

.right-infp-btn a:hover {
  background: #00eaff;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #00eaff, 0 0 25px #00eaff, 0 0 50px #00eaff,
    0 0 100px #00eaff;
}
</style>

